<div class="body-panel" style="min-height: 680px" ng-controller="FileUploadController">
    <div style="margin: 20px 0 -30px 40px; font-size: 20px;">
        <a href="#/dishList"> <span
                class="glyphicon glyphicon-arrow-left"></span> Go Back
        </a>
    </div>
    <div
            style="background-color: #fafcfe; border: 1px solid #dfe8f2; width: 95%; margin: auto; position: relative; top: 45px; height: 480px;">
        <form style="margin-top: 50px;"
              id="editForm" enctype="multipart/form-data" name="form">
            <div class="text-center">
                <h2>Add Dish</h2>
            </div>
            <br/> <br/> <br/>

            <div class="form-group">
                <label class="col-md-3 control-label text-right">Dish
                    Name: </label>

                <div class="col-md-7">
                    <input class="form-control" type="text" ng-model="dname" placeholder="Dish Name"
                           name="dname" id="dname" required>
                </div>
            </div>
            <br/> <br/>

            <div class="form-group">
                <label class="col-md-3 control-label text-right">Dish
                    Price: </label>

                <div class="col-md-7">
                    <input class="form-control" type="number" ng-model="price" placeholder="Dish Price"
                           name="price" id="price" required>
                </div>
            </div>
            <br/> <br/>

            <div class="form-group">
                <label class="col-md-3 control-label text-right">Dish
                    Img: </label>

                <div class="col-md-12 col-md-offset-3">
                    <input type="file" ngf-select ng-model="file" name="file"
                           accept="image/*" ngf-max-size="2MB" required
                           ngf-model-invalid="errorFile" style="margin-top: -22px;">
                    <img ng-show="form.file.$valid" ngf-thumbnail="file" class="thumb" style="width: 150px; height: 120px;">
                    <button class="btn btn-primary" ng-click="file = null" ng-show="file" style="margin-top: 106px; margin-bottom: 10px;"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
                </div>
            </div>
            <!--<div id="queue"></div>-->
            <br/>

            <div class="form-group text-center">
                <button style="width: 200px;" type="submit"
                        class="btn btn-primary" ng-click="submit()">Confirm
                </button>
            </div>
            <br>
            <span class="progress" ng-show="file.progressPercentage >= 0">
                 <div style="width:{{file.progressPercentage}}%"
                 ng-bind="file.progressPercentage + '%'"></div>
             </span>
            <span ng-show="file.result">Upload Successful</span>
            <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
        </form>
    </div>
</div>